<template>
	<div class="content-lay">
		<div class="form-row">
			<div class="form-row-label">
				{{ $t("message.BSCps.pdfCps.label_2") }}
			</div>
			<div class="form-row-right-content">
				<el-select v-model="processorIndex" :placeholder="$t('message.bhView.label.placeholderSearch')"
					class="form-ipt" @change="processorChange">
					<el-option v-for="(item, index) in processorData" :key="item.proCode" :label="item.proName"
						:value="index"></el-option>
				</el-select>
			</div>

			<div class="form-row-label-border">
				{{ posNo }}
			</div>
			<!-- <div class="form-row-label-border">
				{{ posName }}
			</div> -->
			<!-- <el-button class="form-row-label-border" @click="_isEdit">编辑</el-button> -->
			<span class="iconfont " :class="!isEdit ? 'isActive' : ''" @click="_isEdit">&#xec7c;</span>

			<div class="form-row-right-view1">
				<el-button class="bg-bottom-btn" type="primary" @click="onEditClick">
					{{ $t("message.cadViewer.optTypeStr.commonSign") }}
				</el-button>
			</div>
		</div>

		<CadViewForReading class="cad-view" ref="CadViewForReading" :leftReadTabelRow="processorData[ID]"
			@onLineGroupClick="onLineGroupClick" :isMouseOver="isEdit" />
	</div>
</template>

<script>
import { getListBox, GetPFDDesc } from "../../../api/api";
import { getProcessor } from "@/api/api";
import CadViewForReading from "@/components/TabelLineCadViews/CadViewForReading";
import eventBus from "@/eventBus/bus";

export default {
	name: "pfdContentView",
	props: {
		isEdit: Boolean
	},
	watch: {
		processorData: {
			handler(newName, oldName) {
				// this.processorIndex = this.processorData[0].proCode
			},
			immediate: true,
			deep: true,
		},
		isEdit(nVal) {
			console.log(nVal)
		},
		pltCodeValue(nVal) {
			this.getProcessorApi();
		},
	},
	data() {
		return {
			tempID: 0,
			ID: 0,
			processorIndex: 0,
			processorData: [],
			posNo: '',
			posName: '',
			allListDes: [],
			isMouseOver: true,


		};
	},
	components: {
		CadViewForReading: CadViewForReading,
	},

	computed: {
		pltCodeValue() {
			return this.$store.state.threeRelationPltCode;
		},
	},

	methods: {
		_isEdit() {
			this.isEdit = !this.isEdit;
			this.$emit("isEdit", this.isEdit)
			this.isMouseOver = !this.isMouseOver;
		},
		//处理系一览
		getProcessorApi() {
			let dataJson = {
				pltCode:
					this.$store.state.pltCode == ""
						? 0
						: this.$store.state.pltCode,
			};
			getProcessor(dataJson).then((res) => {
				console.log(res, "FFFFFFFFFFFf")
				this.processorData = [];
				if (res.data.code != 0) {
					this.processorIndex = null;
					return;
				}
				this.processorData = res.data.data;
				this.processorIndex = 0;
				this.processorChange(0);
			});
		},

		processorChange(e) {
			this.tempID = e;
			console.log(this.processorData[e]);
			eventBus.$emit("_getProcessor", this.processorData[e])
		},
		async GetPFDDescApi() {
			let dataJson = { ProCode: Number(this.proceData.proCode) }
			let res = await GetPFDDesc(dataJson)
			this.allListDes = res.data.data;
		},
		/**
		 * 点击线组
		 */
		onLineGroupClick(e) {
			this.posNo = e.prlNo;
			console.log(e, "qqqqqqqqq")
			eventBus.$emit("pfdRelationSelectTableRow", e);
			if (e == null) {
				this.$emit("onGetListBox", null);
			} else {
				this.getListBoxApi(
					this.processorData[this.processorIndex].proCode,
					e.prlNo,
					this.processorData[this.processorIndex].pltCode
				);
			}
		},

		/**
		 * 获取 组下的机器下拉列表(下拉列表)
		 */
		getListBoxApi(proCode, linNumb, inPltCode) {
			if (!linNumb) {
				return
			}

			let dataJson = {
				proCode: proCode,
				linNumb: linNumb,
				pltCode: inPltCode,
			};
			getListBox(dataJson).then((res) => {
				console.log(res, "getListBox")
				if (res.data.code != 0) {
					this.$emit("onGetListBox", null);
					return;
				}

				if (res.data.data && res.data.data.length > 0) {
					let tempItem = res.data.data[0];
					this.$emit("onGetListBox", tempItem);
				}
			});
		},

		onEditClick() {
			let routeData = this.$router.resolve({
				path: "/pfdCAD",
				query: {
					pdfFile: this.processorData[this.processorIndex].pdfFile,
					pltCode: this.processorData[this.processorIndex].pltCode,
					proCode: this.processorData[this.processorIndex].proCode,
					proName: this.processorData[this.processorIndex].proName,
					sourceWidth: this.processorData[this.processorIndex].width,
					sourceHeight: this.processorData[this.processorIndex].height,
					proPass: this.processorData[this.processorIndex].proPass,
				},
			});
			window.open(routeData.href, "_blank");
		},
	},
	created() {
		this.getProcessorApi();
	},
	mounted() {
		eventBus.$on("changeID", () => {
			this.ID = this.tempID;
		})
	},
	beforeDestroy() {
		eventBus.$off("changeID");
	},
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.form-row {
	width: 100%;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;

	.form-row-label {
		width: 15%;
		color: rgba(0, 0, 0, 0.85);
		//   font-weight: 500;
	}

	.form-row-label-border {
		width: auto;
		min-width: 50px;
		color: rgba(0, 0, 0, 0.85);
		border: 1px solid rgba(185, 179, 179, 0.85);
		margin: 0 20px 0 5px;
		white-space: nowrap;
		border-radius: 5px;
		height: 24px;
		line-height: 24px;
		padding: 0 10px;
		text-align: center;
	}

	.form-row-right-content {
		width: 320px;
		margin-right: 15px;

		.form-ipt {
			width: 100%;
			height: 24px;

			::v-deep .el-input__inner {
				height: 24px;
				background: #fff;
			}

			::v-deep .el-input__icon {
				line-height: 24px;
			}
		}
	}

	.form-row-right-view {
		width: calc(100%);
		text-align: right;

		.bg-bottom-btn {
			min-height: 22px;
			width: 101px;
			height: 22px;
			color: #ffffff;
			padding: 1px 8px;
			margin-right: 60px;
			border-radius: 4px;
			transform: translateY(-52px) translateX(11px);
		}
	}

	.form-row-right-view1 {
		width: calc(100%);
		text-align: right;

		.bg-bottom-btn {
			min-height: 22px;
			width: 116px !important;
			height: 32px;
			color: #ffffff;
			padding: 1px 8px;
			margin-right: 60px;
			border-radius: 4px;
			transform: translateY(-55px) translateX(60px);
		}
	}
}

.cad-view {
	width: 100%;
	height: calc(100% - 24px);
	background: #fff;
}

.iconfont {
	font-size: 24px;
	cursor: pointer;
}

.isActive {
	color: #df1222;
}
</style>
